<!DOCTYPE html>

<!-- Copyright (c) 2013, Google Inc. Please see the AUTHORS file for details.
     All rights reserved. Use of this source code is governed by a BSD-style
     license that can be found in the LICENSE file. -->

<link rel="import" href="packages/polymer/polymer.html">

<!-- NOTE: The order is important: it should follow the dependency graph. -->
<link rel="import" href="packages/spark_widgets/spark_button/spark_button.html">
<link rel="import" href="packages/spark_widgets/spark_dialog_button/spark_dialog_button.html">
<link rel="import" href="packages/spark_widgets/spark_dialog/spark_dialog.html">
<link rel="import" href="packages/spark_widgets/spark_menu_item/spark_menu_item.html">
<link rel="import" href="packages/spark_widgets/spark_menu_separator/spark_menu_separator.html">
<link rel="import" href="packages/spark_widgets/spark_menu_button/spark_menu_button.html">
<link rel="import" href="packages/spark_widgets/spark_progress/spark_progress.html">
<link rel="import" href="packages/spark_widgets/spark_split_view/spark_split_view.html">
<link rel="import" href="packages/spark_widgets/spark_status/spark_status.html">
<link rel="import" href="packages/spark_widgets/spark_toolbar/spark_toolbar.html">

<link rel="import" href="packages/cde_polymer_designer/cde_polymer_designer.html">
<link rel="import" href="packages/paper/core-icons/core-icons.html">
<link rel="import" href="packages/paper/paper-fab/paper-fab.html">

<link rel="import" href="lib/ui/cde-fab/cde-fab.html">
<link rel="import" href="lib/ui/commit_message_view/commit_message_view.html">
<link rel="import" href="lib/ui/goto_line_view/goto_line_view.html">

<polymer-element name="spark-polymer-ui" attributes="splitViewPosition">
  <template>
    <link rel="stylesheet" href="spark_polymer_ui.css">

    <!-- Markdown preview stylesheet -->
    <link rel="stylesheet" href="lib/ui/markdown.css">

    <spark-split-view
        id="splitView"
        direction="left"
        splitterSize="1"
        splitterHandle="false"
        targetSize="{{splitViewPosition}}"
        minTargetSize="200"
        maxTargetSize="600"
        on-update="{{onSplitterUpdate}}">
      <div beforeSplit>
        <spark-toolbar class="toolbar"
            horizontal
            justify="spaced"
            spacing="small">
          <spark-menu-button
              id="mainMenu"
              valueAttr="action-id"
              arrow="none"
              on-activate="{{onMenuSelected}}">

            <spark-button menuButton flat round focused tooltip="Main menu">
              <svg width="24px" height="24px" viewBox="0 0 24 24">
                <path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path>
              </svg>
            </spark-button>

            <spark-menu-item action-id="project-new" label="New Project...">
            </spark-menu-item>
            <!-- TODO(devoncarew): Removed as per #2348. -->
            <!-- spark-menu-item action-id="file-open" label="Open File...">
            </spark-menu-item -->
            <spark-menu-item action-id="folder-open" label="Open Folder...">
            </spark-menu-item>
            <spark-menu-item action-id="git-clone" label="Git Clone...">
            </spark-menu-item>

            <spark-menu-separator></spark-menu-separator>

            <spark-menu-item action-id="application-push" label="Deploy to Mobile...">
            </spark-menu-item>
            <template if="{{apkBuildMode}}">
              <spark-menu-item action-id="application-build" label="Build APK…">
              </spark-menu-item>
            </template>
            <spark-menu-item action-id="webstore-publish" label="Publish to Chrome Web Store...">
            </spark-menu-item>

            <template if="{{developerMode}}">
              <spark-menu-separator></spark-menu-separator>
              <spark-menu-item action-id="run-tests" label="Run Tests">
              </spark-menu-item>
              <spark-menu-item action-id="run-python" label="Run Python">
              </spark-menu-item>
            </template>

            <spark-menu-separator></spark-menu-separator>

            <spark-menu-item action-id="send-feedback" label="Send Feedback...">
            </spark-menu-item>
            <spark-menu-item action-id="help-about" label="About Chrome Dev Editor">
            </spark-menu-item>
          </spark-menu-button>

          <spark-button id="runButton" flat round tooltip="Run">
            <svg width="24px" height="24px" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </spark-button>

          <div id="fileFilterGroup">
            <input id="fileFilter"
                type="text"
                placeholder="Filter"
                spellcheck="false"
                on-keydown="{{fileFilterKeydownHandler}}"
                on-input="{{fileFilterInputHandler}}"/>

            <spark-menu-button
                id="moreSearchMenu"
                valueAttr="action-id"
                arrow="none"
                on-activate="{{onMenuSelected}}">

              <spark-button id="moreSearchButton"
                  menuButton
                  padding="small"
                  hoverStyle="foreground"
                  tooltip="Filter/search mode">
                <svg width="24px" height="28px" viewBox="0 0 24 28">
                  <path d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3C5.9,3,3,5.9,3,9.5S5.9,16,9.5,16c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5C12,5,14,7,14,9.5S12,14,9.5,14z"></path>
                  <polygon points="6,21 11,26 16,21"></polygon>
                </svg>
              </spark-button>

              <spark-menu-item id="showFilesView"
                  action-id="show-files-view"
                  label="Filter"
                  checkmark="true">
              </spark-menu-item>
              <spark-menu-item id="showSearchView"
                  action-id="show-search-view"
                  label="Search in files">
              </spark-menu-item>
            </spark-menu-button>
          </div>
        </spark-toolbar>

        <div id="leftPanel" tabindex="0">
          <div id="fileViewArea"></div>
          <div id="fileViewFilterNoResult" class="hidden">
            No matching files
          </div>

          <div id="file-item-context-menu" class="dropdown">
            <div class="backdrop"></div>
            <ul class="dropdown-menu" role="menu"></ul>
          </div>

          <div id="searchViewArea" class="hidden"></div>
          <div id="searchViewPlaceholder" class="hidden">
            <div>Type a string to search in the workspace</div>
            <div id="showFileViewButton">Close Search</div>
          </div>
          <div id="searchViewNoResult" class="hidden">
            No matching files
          </div>
        </div>

        <spark-toolbar id="bottom-toolbar" class="toolbar"
            layout
            horizontal
            justify="right"
            spacing="small">
          <spark-button id="settingsButton" flat round tooltip="Settings...">
            <svg width="24px" height="24px" viewBox="0 0 24 24">
              <!-- settings icon from core-icons -->
              <path d="M19.4 13c0-.3.1-.6.1-1s0-.7-.1-1l2.1-1.7c.2-.2.2-.4.1-.6l-2-3.5c-.1-.1-.3-.2-.6-.1l-2.5 1c-.5-.4-1.1-.7-1.7-1l-.4-2.6c.1-.3-.2-.5-.4-.5h-4c-.2 0-.5.2-.5.4l-.4 2.7c-.6.2-1.1.6-1.7 1l-2.4-1c-.3-.1-.5 0-.7.2l-2 3.5c-.1.1 0 .4.2.6l2.1 1.6c0 .3-.1.6-.1 1s0 .7.1 1l-2.1 1.7c-.2.2-.2.4-.1.6l2 3.5c.1.1.3.2.6.1l2.5-1c.5.4 1.1.7 1.7 1l.4 2.6c0 .2.2.4.5.4h4c.2 0 .5-.2.5-.4l.4-2.6c.6-.3 1.2-.6 1.7-1l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.5-.1-.6l-2.3-1.6zm-7.4 2.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"/>
            </svg>
          </spark-button>
          <spark-status id="sparkStatus" flex></spark-status>
          <cde-fab icon="add" command="show-new-project" tooltip="New Project...">
          </cde-fab>
        </spark-toolbar>
      </div>

      <div afterSplit>
        <div id="editorArea" tabIndex="-1">
          <div id="outlineContainer">
            <spark-splitter id="outlineResizer"
                direction="right"
                size="0"
                targetSize="200"
                minTargetSize="100"
                maxTargetSize="500">
            </spark-splitter>
            <div id="outline" class="scrollbar-dark">
              <ul>
              </ul>
            </div>
          </div>
          <spark-button id="toggleMarkdownPreviewButton" class="hidden"
              tooltip="Toggle preview" flat round>
            <svg width="24px" height="24px" viewBox="0 0 24 24">
              <path d="M20,4h-3.2L15,2H9L7.2,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M8.8,11c0,1.8,1.4,3.2,3.2,3.2c1.8,0,3.2-1.4,3.2-3.2h-1.7L16,8.5l2.5,2.5H17c0,2.8-2.2,5-5,5c-2.8,0-5-2.2-5-5H8.8z"/>
            </svg>
          </spark-button>
          <spark-button id="openPolymerDesignerButton" class="hidden"
              tooltip="Open in Polymer Designer" flat round>
            <svg width="24px" height="24px" viewBox="0 0 24 24">
              <polygon points="19,4 15,4 7.1,16.6 4.5,12 9,4 5,4 0.5,12 5,20 9,20 16.9,7.4 19.5,12 15,20 19,20 23.5,12 "/>
            </svg>
          </spark-button>
        </div>

        <spark-toolbar id="navigationButtons" class="toolbar"
            horizontal
            justify="right"
            spacing="small">
          <spark-button id="leftNav" flat round tooltip="Back">
            <svg width="24px" height="24px" viewBox="0 0 24 24">
              <path d="M20 11h-12.2l5.6-5.6-1.4-1.4-8 8 8 8 1.4-1.4-5.6-5.6h12.2v-2z"/>
            </svg>
          </spark-button>
          <spark-button id="rightNav" flat round tooltip="Forward">
            <svg width="24px" height="24px" viewBox="0 0 24 24">
              <path d="M12 4l-1.4 1.4 5.6 5.6h-12.2v2h12.2l-5.6 5.6 1.4 1.4 8-8z"/>
            </svg>
          </spark-button>
          <spark-button id="toggle-outline" command="toggle-outline" flat round
              tooltip="Toggle outline" disabled>
            <svg width="24px" height="24px" viewBox="0 0 24 24">
              <path d="M9.067 15h11.933v-2h-11.933v2zm0 4h11.933v-2h-11.933v2zm0-8h11.933v-2h-11.933v2zm-5.067-6v2h17v-2h-17z"/>
            </svg>
          </spark-button>
        </spark-toolbar>
      </div>
    </spark-split-view>

    <!-- =========================== DIALOGS =============================== -->

    <!-- Error dialog -->
    <spark-dialog id="errorDialog" headerTitle="">
      <div id="errorMessage" class="help-block"></div>

      <spark-dialog-button id="errorClose" dismiss focused>Close</spark-dialog-button>
    </spark-dialog>

    <!-- OK / Cancel dialog -->
    <spark-dialog id="okCancelDialog" headerTitle="">
      <p id="okCancelMessage"></p>

      <spark-dialog-button cancel>Cancel</spark-dialog-button>
      <spark-dialog-button id="okText" submit focused>OK</spark-dialog-button>
    </spark-dialog>

    <!-- Rename File dialog -->
    <spark-dialog id="renameDialog" headerTitle="Rename">
      <label for="renameFileName">New name</label>
      <input id="renameFileName" type="text" class="form-control"
          required pattern="[\w\.-]+"
          spellcheck="false" autocomplete="on" focused>

      <spark-dialog-button cancel>Cancel</spark-dialog-button>
      <spark-dialog-button submit>Rename</spark-dialog-button>
    </spark-dialog>

    <!-- New File dialog -->
    <spark-dialog id="fileNewDialog" headerTitle="New File">
      <label for="fileName">New file name</label>
      <input id="fileName" type="text" class="form-control"
          required pattern="[\w\.-]+"
          spellcheck="false" focused>

      <spark-dialog-button cancel>Cancel</spark-dialog-button>
      <spark-dialog-button submit>Create</spark-dialog-button>
    </spark-dialog>

    <!-- New Folder dialog -->
    <spark-dialog id="folderNewDialog" headerTitle="New Folder">
      <label for="folderName">New folder name</label>
      <input id="folderName" type="text" class="form-control"
          required pattern="[\w\.-]+"
          spellcheck="false" focused>

      <spark-dialog-button cancel>Cancel</spark-dialog-button>
      <spark-dialog-button submit>Create</spark-dialog-button>
    </spark-dialog>

    <!-- New Project dialog -->
    <spark-dialog id="newProjectDialog" headerTitle="New Project">
      <div class="form-group">
        <label for="name">Project name</label>
        <input id="name" type="text" class="form-control"
            placeholder="HelloWorld" required pattern="[\w\.-]+"
            spellcheck="false" autocomplete="on" focused />
      </div>
      <div class="form-group">
        <label for="type">Project type</label>

        <!-- TODO(ussuri): This duplication is pretty ugly, but none of the
          advertised ways worked: <template if...> around individual options
          breaks dart2js ("'template if' within 'select'...");
          <option template if...> doesn't work at least in Dartium.
        -->
        <template if="{{showWipProjectTemplates}}">
          <!-- TODO(ussuri): Rename "type" - too generic => dangerous. -->
          <select name="type" class="form-control" autocomplete="on">
            <optgroup label="Default">
              <option value="empty">
                Blank project
              </option>
            </optgroup>
            <optgroup label="Web apps">
              <option value="stagehand/webapp">
                Dart web app
              </option>
              <!-- TODO(devoncarew): Removed until we can launch into -->
              <!-- Dartium, or Dart Polymer can run without transformers. -->
              <!-- option value="stagehand/polymerapp">
                Dart web app (using Polymer paper elements)
              </option -->
              <option value="web/web_app_js">
                JavaScript web app
              </option>
              <option value="web/web_app_polymer_js">
                JavaScript web app (using Polymer paper elements)
              </option>
              <option value="web/web_starter_kit">
                Web Starter Kit (boilerplate &amp; tooling for multi-device development)
              </option>
            </optgroup>
            <optgroup label="Chrome Apps">
              <option value="chrome/chrome_app_dart">
                Dart Chrome App
              </option>
              <option value="chrome/chrome_app_js">
                JavaScript Chrome App
              </option>
              <option value="chrome/chrome_app_polymer_js">
                JavaScript Chrome App (using Polymer paper elements)
              </option>
              <!-- This one works when installed in Chrome manually, but
                   launching via the 'Run' button is broken. BUG #1935. -->
              <option value="chrome/chrome_extension_js">
                JavaScript Chrome extension
              </option>
            </optgroup>
            <optgroup label="Other">
              <option value="stagehand/package">
                Dart package
              </option>
              <!-- This one just needs some additional work. -->
              <option value="polymer/polymer_element_dart">
                Dart Polymer custom element
              </option>
              <option value="polymer/polymer_element_js">
                JavaScript Polymer custom element
              </option>
              <!-- This one is internal for now. -->
              <option value="polymer/spark_widget">
                Chrome Dev Editor widget
              </option>
            </optgroup>
          </select>
        </template>

        <template if="{{!showWipProjectTemplates}}">
          <select name="type" class="form-control" autocomplete="on">
            <optgroup label="Default">
              <option value="empty">
                Blank project
              </option>
            </optgroup>
            <optgroup label="Web apps">
              <option value="stagehand/webapp">
                Dart web app
              </option>
              <!-- TODO(devoncarew): Removed until we can launch into -->
              <!-- Dartium, or Dart Polymer can run without transformers. -->
              <!-- option value="stagehand/polymerapp">
                Dart web app (using Polymer paper elements)
              </option -->
              <option value="web/web_app_js">
                JavaScript web app
              </option>
              <option value="web/web_app_polymer_js">
                JavaScript web app (using Polymer paper elements)
              </option>
              <option value="web/web_starter_kit">
                Web Starter Kit (boilerplate &amp; tooling for multi-device development)
              </option>
            </optgroup>
            <optgroup label="Chrome apps">
              <option value="chrome/chrome_app_dart">
                Dart Chrome App
              </option>
              <option value="chrome/chrome_app_js">
                JavaScript Chrome App
              </option>
              <option value="chrome/chrome_app_polymer_js">
                JavaScript Chrome App (using Polymer paper elements)
              </option>
            </optgroup>
            <optgroup label="Other">
              <option value="stagehand/package">
                Dart package
              </option>
              <option value="polymer/polymer_element_js">
                JavaScript Polymer custom element
              </option>
            </optgroup>
          </select>
        </template>
      </div>

      <spark-dialog-button cancel>Cancel</spark-dialog-button>
      <spark-dialog-button submit>Create</spark-dialog-button>
    </spark-dialog>

    <!-- Build APK dialog -->
    <spark-dialog id="buildAPKDialog" headerTitle="Build APK">
      <div class="form-group">
        <div class="help-block">
          Please start the
          <a href="https://github.com/MobileChromeApps/chrome-app-developer-tool/releases"
              on-click="{{handleAnchorClick}}">
            Chrome App Developer Tool for Mobile (App Dev Tool)
          </a>
          application on your Android device.
        </div>
      </div>

      <div class="form-group">
        <div class="input-label">
          <label for="appName">App Name:</label>
          <input id="appName" type="text" class="form-control"
              placeholder="HelloWorld"
              spellcheck="false" autocomplete="on">
        </div>
        <div class="input-label">
          <label for="packageName">Package Name:</label>
          <input id="packageName" type="text" class="form-control"
              placeholder="com.example.helloworld"
              spellcheck="false" autocomplete="on">
        </div>
        <div class="input-label">
          <label for="versionName">Version:</label>
          <input id="versionName" type="text" class="form-control"
              placeholder="1.0"
              spellcheck="false" autocomplete="on" focused>
        </div>
      </div>
      <div class="form-group">
        <spark-toolbar class="settings-block"
            horizontal justify="spaced" spacing="small">
          <label class="settings-label">Public key:</label>
          <span id="publicKey" class="settings-value"></span>
          <spark-button id="choosePublicKey" class="change-setting-button"
              flat round padding="medium">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M10,4H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8c0-1.1-0.9-2-2-2h-8L10,4z"></path>
            </svg>
          </spark-button>
        </spark-toolbar>
      </div>
      <div class="form-group">
        <spark-toolbar class="settings-block"
            horizontal justify="spaced" spacing="small">
          <label class="settings-label">Private key:</label>
          <span id="privateKey" class="settings-value"></span>
          <spark-button id="choosePrivateKey" class="change-setting-button"
              flat round padding="medium">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M10,4H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8c0-1.1-0.9-2-2-2h-8L10,4z"></path>
            </svg>
          </spark-button>
        </spark-toolbar>
      </div>
      <div class="form-group">
        <div class="vert-align-box">
          <input type="radio" id="buildTargetADB"
              name="mobileBuildType" value="build-target-adb" checked>
          <label for="buildTargetADB">Build via USB</label>
        </div>
      </div>
      <div class="form-group">
        <div class="vert-align-box">
          <input type="radio" id="buildTargetIP"
              name="mobileBuildType" value="build-target-ip">
          <label for="buildTargetIP">
            Build via a network host with this IP:
          </label>
        </div>
        <div class="radio-button-dependency">
          <!-- TODO(devoncarew): Also, support IPv6 name patterns. -->
          <input id="buildTargetUrl" type="text" class="form-control"
              placeholder="e.g. 192.168.1.101"
              pattern="(\d{1,3}\.){3}\d{1,3}"
              spellcheck="false" autocomplete="on">
        </div>
      </div>
      <div id="buildProgressDescription"></div>
      <div id='buildCheckDeviceMessage' hidden>
        Please check for a connection authorization dialog on your device.
      </div>

      <spark-dialog-button cancel>Cancel</spark-dialog-button>
      <spark-dialog-button submit>Build</spark-dialog-button>
    </spark-dialog>


    <!-- Deploy to Mobile dialog -->
    <spark-dialog id="mobileDeployDialog" headerTitle="Deploy to Mobile">
      <div class="form-group">
        <div class="help-block">
          Please start the
          <a href="https://github.com/MobileChromeApps/chrome-app-developer-tool/releases"
              on-click="{{handleAnchorClick}}">
            Chrome App Developer Tool for Mobile (App Dev Tool)
          </a>
          application on your Android device.
        </div>
      </div>
      <div class="form-group">
        <div class="vert-align-box">
          <input id="adb" type="radio" name="mobileDeployType" value="push-adb" checked>
          <label for="adb">Deploy via USB</label>
        </div>
        <div class="vert-align-box">
          <br>
          <select id="usbDevices" class="form-control" value="select-device" hidden>
            <option></option>
          </select>
          <spark-button id="addDevice">Add Device</spark-button>
        </div>
      </div>
      <div class="form-group">
        <div class="vert-align-box">
          <input id="ip" type="radio" name="mobileDeployType" value="push-ip">
          <label for="ip">Deploy to a network host with this IP:</label>
        </div>
        <div class="radio-button-dependency">
          <!-- TODO(devoncarew): Also, support IPv6 name patterns. -->
          <input id="pushUrl" type="text" class="form-control "
              placeholder="e.g. 192.168.1.101"
              pattern="(\d{1,3}\.){3}\d{1,3}"
              spellcheck="false" autocomplete="on">
        </div>
      </div>
      <template if="{{liveDeployMode}}">
        <div class="form-group">
          <input id="liveDeploy" name="liveDeploy" type="checkbox">
          <label for="liveDeploy">Live Deployment</label>
        </div>
      </template>
      <div id="progressDescription"></div>
      <div id='deployCheckDeviceMessage'>
        Please check for a connection authorization dialog on your device.
      </div>

      <spark-dialog-button cancel>Cancel</spark-dialog-button>
      <spark-dialog-button submit focused>Deploy</spark-dialog-button>
    </spark-dialog>

    <!-- Git Clone dialog -->
    <spark-dialog id="gitCloneDialog" headerTitle="Clone Git Project">
      <div class="form-group">
        <label for="gitRepoUrl">Repository URL</label>
        <!-- TODO(devoncarew): Swap this out for a sample application repo? -->
        <input id="gitRepoUrl" type="url" class="form-control"
            placeholder="https://github.com/dart-lang/chromedeveditor.git"
            spellcheck="false" autocomplete="on" focused>
        <input id="gitRepoUrlCopyInBuffer"/>
      </div>

      <spark-dialog-button id="cloneClose" cancel>Cancel</spark-dialog-button>
      <spark-dialog-button id="clone" submit>Clone</spark-dialog-button>
    </spark-dialog>

    <!-- Git Commit dialog -->
    <spark-dialog id="gitCommitDialog" headerTitle="Git Commit">
      <div class="form-group">
        <div id="gitUserInfo">
          <div class="input-label">
            <label for="gitName">Your name</label>
            <input id="gitName" type="text" class="form-control"
                placeholder="John Doe" pattern=".+"
                spellcheck="false" autocomplete="on">
          </div>
          <div class="input-label">
            <label for="gitEmail">Email</label>
            <input id="gitEmail" type="email" class="form-control"
                placeholder="johndoe@gmail.com"
                spellcheck="false" autocomplete="on">
          </div>
        </div>
      </div>
      <div class="input-label">
        <label id="gitChangeLabel">Changes</label>
        <div id="gitStatusDiv">
           <span id="gitStatus"></span>
           <a href="#" id="gitStatusDetail">Details...</a>
        </div>
      </div>
      <div id="gitChangeList"></div>
      <div class="form-group">
        <label for="gitCommitMessage">Commit message</label>
        <textarea id="gitCommitMessage" type="text" class="form-control"
            rows="3" wrap="soft" spellcheck autocomplete="on" focused>
        </textarea>
        <span class="help-block">
          Enter a brief description of the changes.
        </span>
      </div>
      <spark-dialog-button id="gitCommitCancel" cancel>Cancel</spark-dialog-button>
      <spark-dialog-button id="gitCommit" submit>Commit</spark-dialog-button>
    </spark-dialog>

    <!-- Git Branch dialog -->
    <spark-dialog id="gitBranchDialog" headerTitle="Create Branch">
      <label for="gitBranchName">Create a new branch</label>
      <input id="gitBranchName" type="text" class="form-control"
          required pattern="[^~:?*\^\[\s]+"
          spellcheck="false" autocomplete="on" focused>
      <div class="form-group">
        <label for="gitRemoteBranches">Checkout a branch</label>
        <select id="gitRemoteBranches" class="form-control"></select>
      </div>
      <spark-dialog-button id="gitBranchCancel" cancel>Cancel</spark-dialog-button>
      <spark-dialog-button id="gitBranch" submit>Create Branch</spark-dialog-button>
    </spark-dialog>

    <!-- Git Merge dialog -->
    <spark-dialog id="gitMergeDialog" headerTitle="Merge Branch">
      <label for="gitBranchName">Current branch</label>
      <input id="gitBranchName" type="text" class="form-control"
          required pattern="[^~:?*\^\[\s]+"
          spellcheck="false" autocomplete="on" focused>
      <div class="form-group">
        <label for="gitBranches">Select branch to merge </label>
        <select id="gitBranches" class="form-control"></select>
      </div>
      <spark-dialog-button id="gitBranchCancel" cancel>Cancel</spark-dialog-button>
      <spark-dialog-button id="gitBranch" submit>Merge</spark-dialog-button>
    </spark-dialog>

    <!-- Git Checkout dialog -->
    <spark-dialog id="gitCheckoutDialog" headerTitle="Git Checkout">
      <div class="form-group">
        <label for="currentBranchName">Current branch</label>
        <input id="currentBranchName" type="text" class="form-control"
            spellcheck="false" disabled focused>
      </div>
      <div class="form-group">
        <label for="gitCheckoutBranch">Switch to branch</label>
        <select id="gitCheckoutBranch" class="form-control"></select>
      </div>
      <spark-dialog-button id="gitCheckoutCancel" cancel>Cancel</spark-dialog-button>
      <spark-dialog-button id="gitCheckout" submit>Checkout</spark-dialog-button>
    </spark-dialog>

    <!-- Git Push dialog -->
    <spark-dialog id="gitPushDialog" headerTitle="Git Push">
      <div class="form-group">
        <div id="gitCommitList"></div>
      </div>
      <spark-dialog-button id="gitPushClose">Cancel</spark-dialog-button>
      <spark-dialog-button id="gitPush" submit focused>Push</spark-dialog-button>
    </spark-dialog>

    <!-- About dialog -->
    <spark-dialog id="aboutDialog" headerTitle="About Chrome Dev Editor">
      <div class="form-group">
        <div class="vert-align-box">
          <div id="aboutDialog-icon">
            <img src="images/icon_48.png">
          </div>
          <div id="aboutDialog-text">
            <div><label>Develop apps on the Chrome platform</label></div>
            <div><label>Version {{appVersion}}</label></div>
          </div>
        </div>
      </div>
      <div id="analyticsOptIn" class="form-group">
        <div class="top-align-box">
          <span>
            <input id="analyticsCheck" type="checkbox">
          </span>
          <label for="analyticsCheck">
            Help make Chrome Dev Editor better by automatically sending usage
            statistics and crash reports to Google
          </label>
        </div>
      </div>
      <spark-dialog-button submit focused>Done</spark-dialog-button>
    </spark-dialog>

    <!-- Settings dialog -->
    <spark-dialog id="settingsDialog" headerTitle="Settings">
      <div class="form-group">
        <spark-toolbar class="settings-block"
            horizontal justify="left" spacing="small">
          <label class="settings-label">Whitespace:</label>
          <span class="vert-align-box">
            <input id="stripWhitespace" type="checkbox">
            <label for="stripWhitespace">
              Strip trailing whitespace on save
            </label>
          </span>
        </spark-toolbar>
      </div>

      <div class="form-group" id="changeTheme">
        <spark-toolbar class="settings-block"
            horizontal justify="spaced" spacing="small">
          <label class="settings-label">Editor theme:</label>
          <span class="settings-value"></span>
          <spark-button id="themeMinus" class="change-setting-button"
              flat round padding="none" on-click="{{onThemeMinus}}">
            <!--TODO(ussuri): Use SVG <use> directives instead here and below.-->
            <svg viewBox="0 0 24 24" width="24" height="24">
              <polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "></polygon>
            </svg>
          </spark-button>
          <spark-button id="themePlus" class="change-setting-button"
              flat round padding="none" on-click="{{onThemePlus}}">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <polygon points="10,6 8.6,7.4 13.2,12 8.6,16.6 10,18 16,12 "></polygon>
            </svg>
          </spark-button>
        </spark-toolbar>
      </div>

      <div class="form-group" id="changeFont">
        <spark-toolbar class="settings-block"
            horizontal justify="spaced" spacing="small">
          <label class="settings-label">Editor font:</label>
          <span class="settings-value"></span>
          <spark-button id="fontMinus" class="change-setting-button"
              flat round padding="none" on-click="{{onFontSmaller}}">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M19,13H5v-2h14V13z"></path>
            </svg>
          </spark-button>
          <spark-button id="fontPlus" class="change-setting-button"
              flat round padding="none" on-click="{{onFontLarger}}">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6V13z"></path>
            </svg>
          </spark-button>
        </spark-toolbar>
      </div>

      <div class="form-group" id="changeKeys">
        <spark-toolbar class="settings-block"
            horizontal justify="spaced" spacing="small">
          <label class="settings-label">Key bindings:</label>
          <span class="settings-value"></span>
          <spark-button id="keysMinus" class="change-setting-button"
              flat round padding="none" on-click="{{onKeysMinus}}">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "></polygon>
            </svg>
          </spark-button>
          <spark-button id="keysPlus" class="change-setting-button"
              flat round padding="none" on-click="{{onKeysPlus}}">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <polygon points="10,6 8.6,7.4 13.2,12 8.6,16.6 10,18 16,12 "></polygon>
            </svg>
          </spark-button>
        </spark-toolbar>
      </div>

      <!-- TODO(devoncarew): Always show this directory, even on chrome OS. -->
      <!-- Re-examine when syncfs is re-enabled. -->
      <!-- template if="{{!chromeOS}}" -->
      <div class="form-group" id="rootDirectory">
        <spark-toolbar class="settings-block"
            horizontal justify="spaced" spacing="small">
          <label class="settings-label">Root directory:</label>
          <span id="directoryLabel" class="settings-value"></span>
          <spark-button id="chooseDirectory" class="change-setting-button"
              flat round padding="medium" on-click="{{onClickRootDirectory}}">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M10,4H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8c0-1.1-0.9-2-2-2h-8L10,4z"></path>
            </svg>
          </spark-button>
        </spark-toolbar>
      </div>
      <!-- /template -->

      <div class="form-group" id="gitCredentials">
        <spark-toolbar class="settings-block"
            horizontal justify="edges" spacing="small">
          <label class="settings-label">Git credentials:</label>
          <spark-button class="reset-setting-button"
              flat on-click="{{onResetGit}}">
            Clear Git Credentials
          </spark-button>
        </spark-toolbar>
        <div id="gitResetSettingsDone" class="reset-setting-result">
          Done
        </div>
      </div>

      <template if="{{developerMode}}">
        <div class="form-group" id="resetPreferences">
          <spark-toolbar class="settings-block"
              horizontal justify="edges" spacing="small">
            <label class="settings-label">Preferences:</label>
            <spark-button class="reset-setting-button"
                flat on-click="{{onResetPreference}}">
              Reset Preferences
            </spark-button>
          </spark-toolbar>
          <div id="preferenceResetResult" class="reset-setting-result"></div>
        </div>
      </template>

      <spark-dialog-button dismiss focused>Close</spark-dialog-button>
    </spark-dialog>

    <!-- Git authentication dialog -->
    <spark-dialog id="gitAuthenticationDialog" headerTitle="Git Authentication">
      <div id="gitUserInfo">
        <div class="input-label">
          <label for="gitUsername">User name</label>
          <input id="gitUsername" type="text" class="form-control"
              placeholder="johndoe" required pattern="\S+"
              spellcheck="false" autocomplete="on" focused>
        </div>
        <div class="input-label">
          <label for="gitPassword">Password</label>
          <input id="gitPassword" type="password" class="form-control"
              placeholder="Required" required>
        </div>
      </div>

      <spark-dialog-button cancel>Cancel</spark-dialog-button>
      <spark-dialog-button submit>Login</spark-dialog-button>
    </spark-dialog>

    <!-- Spark Status dialog -->
    <spark-dialog id="statusDialog" headerTitle="">
      <div id="progressDescription"></div>
    </spark-dialog>

    <!-- Publish on webstore -->
    <spark-dialog id="webStorePublishDialog"
        headerTitle="Publish to Chrome Web Store">
      <div class="form-group">
        <div class="vert-align-box">
          <input type="radio" id="new-app-radio"
              name="webStorePublishType" value="new" checked>
          <label for="new-app-radio">Create a new application</label>
        </div>
      </div>
      <div class="form-group">
        <div class="vert-align-box">
          <input type="radio" id="existing-app-radio"
              name="webStorePublishType" value="existing">
          <label for="existing-app-radio">
            Upload to an existing application with this ID:
          </label>
        </div>
        <div class="radio-button-dependency">
          <input id="appID" type="text" class="form-control"
              placeholder="abcdefghijklmnopqrstuvwxyzabcdef"
              required pattern="[a-z]{32}"
              spellcheck="false" autocomplete="on">
        </div>
      </div>
      <spark-dialog-button cancel>Cancel</spark-dialog-button>
      <spark-dialog-button submit focused>Publish</spark-dialog-button>
    </spark-dialog>

    <!-- Properties dialog -->
    <spark-dialog id="propertiesDialog" headerTitle="Properties">
      <div id="body">
      </div>

      <spark-dialog-button dismiss focused>Close</spark-dialog-button>
    </spark-dialog>

    <!-- Chrome WebStore published dialog -->
    <spark-dialog id="webStorePublishedDialog" headerTitle="Application published">
      <div class="help-block">
        An updated version of your application has been uploaded and
        published. You can now see it on the Chrome Web Store.
      </div>

      <spark-dialog-button id="webStorePublishedAction">
        Open in Chrome Web Store
      </spark-dialog-button>
      <spark-dialog-button dismiss focused>
        Close
      </spark-dialog-button>
    </spark-dialog>

    <!-- Chrome WebStore first upload dialog -->
    <spark-dialog id="webStoreUploadedDialog" headerTitle="Application uploaded">
      <div class="help-block">
        Your application has been uploaded to the Chrome Web Store.
        You still need to fill out some additional information in the
        Developer Dashboard before publishing it.
      </div>

      <spark-dialog-button id="webStoreUploadedAction">
        Open in the Developer Dashboard
      </spark-dialog-button>
      <spark-dialog-button submit focused>
        Close
      </spark-dialog-button>
    </spark-dialog>

    <!-- Project remove dialog -->
    <spark-dialog id="projectRemoveDialog" headerTitle="Remove Project">
      <div class="help-block">
        "DELETE" will permanently delete
        &quot;<span id="projectRemoveProjectName"></span>&quot; from disk.<br>
        "REMOVE REFERENCE" will remove the reference to it from
        the list of projects in Chrome Dev Editor, but keep its files on disk.
      </div>

      <spark-dialog-button cancel>
        Cancel
      </spark-dialog-button>
      <spark-dialog-button id="projectRemoveDeleteButton" submit secondary>
        Delete
      </spark-dialog-button>
      <spark-dialog-button id="projectRemoveRemoveReferenceButton" submit>
        Remove Reference
      </spark-dialog-button>
    </spark-dialog>

    <!-- File remove dialog -->
    <spark-dialog id="fileRemoveDialog" headerTitle="Remove File">
      <div class="help-block">
        "DELETE" will permanently delete
         &quot;<span id="fileRemoveFileName"></span>&quot;
        from disk.<br>
        "REMOVE REFERENCE" will remove the reference to it from
        Chrome Dev Editor, but keep it on disk.
      </div>

      <spark-dialog-button cancel>
        Cancel
      </spark-dialog-button>
      <spark-dialog-button id="fileRemoveDeleteButton" submit primary="false">
        Delete
      </spark-dialog-button>
      <spark-dialog-button id="fileRemoveRemoveReferenceButton" submit>
        Remove Reference
      </spark-dialog-button>
    </spark-dialog>

    <template if="{{polymerDesigner}}">
      <spark-dialog id="polymerDesignerDialog" headerTitle="Polymer Designer">
        <cde-polymer-designer id="polymerDesigner" entryPoint="local">
        </cde-polymer-designer>

        <spark-dialog-button cancel>Cancel</spark-dialog-button>
        <spark-dialog-button id="polymerDesignerClear">Clear</spark-dialog-button>
        <spark-dialog-button id="polymerDesignerRevert">Revert</spark-dialog-button>
        <spark-dialog-button submit focused>Generate code</spark-dialog-button>
      </spark-dialog>
    </template>

  </template>

  <script type="application/dart" src="spark_polymer_ui.dart"></script>
</polymer-element>
